- web6047 - (2021/09/10(金) 現在、システム調整中のため、一部の表示がおかしいかもしれません)

 homepage6047 Top Page

2018/4/30(月)

あれっ…

今日月曜日だったんだ…。日曜日だと思っていました。GWにプログラミングに没頭していると曜日の感覚がなくなるみたいです。


子供はブロックのプログラミングで満足できる? -[program]

RPGとか3DCGとかSVC(サイドビューキャラ)のプログラミングをやりたいんですが、プログラムリスト表示のプログラムがまだ終わっていないので、おあずけ状態です。電子回路のアッテネーターも材料を買ったのに作っていないので…。優先順位はプログラムリスト表示のプログラムが高いみたいです。

プログラムリスト表示のプログラムは、このホームページでプログラムの説明をする際に重要な役割を果たす、、予定なんです。

思えば…

最近はブロックタイプの子供向けのプログラミング教育が流行っているみたいですが、それも実際良いかもしれないのですが、私が最初にプログラミングを始めたときは、小学5年生で普通に一般向けの入門書(ポケットコンピューターのBASIC言語)を読んで楽しんでいたので、ほんとにブロックタイプじゃないとだめなのかなと少し疑問があります。

今のお子さんは、私の時代よりも頭が良く進んでいる感じなので、一般向けの入門書は軽いのでは?と思います。私もブロックのプログラミングのサイトで体験して ある程度知っていますが、ブロックのプログラミングで満足できるのかな、と思います。

物心つき始めたお子さんはもう大人向けのプログラムリストを興味を持って読むことができると思います。

そのつもりでプログラムリスト表示のプログラムを作っています。

だから子供さんが楽しめるようにカラフルだったり挿絵が入っていたりと楽しい感じのリスト表示になっています。


2018/4/29(日)

プログラムリストの表示機能について整頓しました。

過去の2つのプログラムを見てみます。それぞれ別々の機能であり、単独で実現しています。

fig.
▲サンプルへリンク

1つ目の機能「関数の色分け」の過去のバージョン。

プログラムの中で関数部分について色分けしてあり、その関数にちなんだイラストも表示されたりで、読みやすいリストになっていると思います。



fig.
▲サンプルへリンク

2つ目の機能「他のプログラムリストとの変更点(diff)のマーキング」の過去のバージョン。

どこをどう変更すれば新しい機能を実現した新しいプログラムになるのか?というのを赤くマーキングしてくれるので、変更点が一目瞭然です。



これまでこの2つの機能は別々のプログラムであって、2つの機能を同時に動かすことはできませんでした。

2つの表示を切り替えて、変更点を見たいときはリンクを飛んでもらい、その際関数の色分けはなくなる…、というのはいまいちでしょう。


fig.
▲サンプルへリンク

そこで、今回整頓したものがこれです。

2つの機能を1つにまとめました。

関数の色分けをしつつ、変更点も色分けしています。

WEBでの説明にはズバリ最適でしょう!

でも、けっこう大変でした。


色を付けるのには色を塗りたい場所の開始位置にHTMLの開始タグ、終了位置に終了タグを付けます。

関数の色分けのための開始タグと終了タグがあり、また、変更点の色分けにも開始タグと終了タグがあるわけです。行の字下げ(インデント)も開始タグと終了タグがあります。

何も考えないでプログラムすると、これらが下図の左のようにクロスする(またがる)ことがあります。

不正 正常

関数の色分け開始タグ

 変更点の色分け開始タグ

関数の色分け終了タグ

 変更点の色分け終了タグ

関数の色分け開始タグ

関数の色分け終了タグ

変更点の色分け開始タグ

変更点の色分け終了タグ

このようにクロスすると、ブラウザが「HTMLがおかしい」と言ってエラーを出したり、表示がおかしくなったりします。

そこを正常にするのが大変でした。


解決策:

  1. 関数の色分けだけは行をまたいで開始タグと終了タグを置いて良いことにする。
  2. 変更点の色分けは1行以内に開始タグと終了タグを収めるようにする。
    変更点が複数行に及ぶときは、行ごとに開始タグ、終了タグでくくるようにして、とにかく1行に収める。

図にすると、こういうことです。

対策

関数の色分け開始タグ

 変更点の色分け開始タグ … 変更点の色分け終了タグ

関数の色分け終了タグ

 変更点の色分け開始タグ … 変更点の色分け終了タグ

この状態ならクロスがありません。

こうすることで、変更点の1行は他のタグが入ってくることがなくなるので、クロスすることがなくなります。


なおインデントのタグも加えるときはこのようにします。

対策

関数の色分け開始タグ

    インデント開始タグ 変更点の色分け開始タグ … 変更点の色分け終了タグ インデント終了タグ

関数の色分け終了タグ

    インデント開始タグ 変更点の色分け開始タグ … 変更点の色分け終了タグ インデント終了タグ

変更点の外側から覆うようにインデントのタグを取り付けます。

「変更点もインデントも行全体についての装飾」なのでそのような方法がとれます(インデントはもともと行についてのタグで、変更点はベースになっている diff コマンドが行単位という仕様です)。もし、それぞれ行全体ではなく、行内の一部を装飾するものだと、クロスが発生する可能性があります。それぞれ装飾する理由が異なるからで、2つの理由がかぶっているときにクロスします。(下図)

これについての対策は、どの文字にどんなタグをつける予定なのかあらかじめ「予想図」のようなビットマップを作り、マップを見ながらタグをつけるというプログラムが必要になるんじゃないかな…と思います。


もし変更点だけでも文字単位に色塗りしたい、となったときは、まだ対応する余地はありそうです。行内で1つの理由で装飾するときは2つの理由でかぶらないのでクロスしません。

変更点を文字単位にする場合

関数の色分け開始タグ

    インデント開始タグ 変更点開始…変更点終了 変更点開始変更点終了 インデント終了タグ

関数の色分け終了タグ

    インデント開始タグ 変更点開始変更点終了 インデント終了タグ


なにはともあれ、変更点が示され、関数も色分けされているので、自分以外の人が作ったプログラムリストがいくらかわかりやすくなって良かったです。 緑色の髪の若い女性のイラスト




2018/4/25(水)

アッテネーターの自作 -[den]

30歳前半のとき(2008年ごろ)に私は失業し、ハローワークからのすすめで「電子回路エンジニア科」という講座(全7か月)を受講しました。その講座で電気の いろは を学び、7か月全うする前に6か月目で企業から採用されたので途中で受講を終了しました。

その後、エレクトロニクスの業界でやっていくのなら本腰を入れるべきだと考えて、月刊誌の「トランジスタ技術」を毎月買い、講座で紹介された電験三種という資格を何度か受検し(現在不合格)、測定器もいろいろ買いました。

それで、電子回路や電気工作って何が楽しいのかと当初疑問に思っていましたが、その答えはたぶん、「実験が楽しい」んじゃないかなぁと思います。本で示されたとおりの値が自分の実験で出たり、回路が動いたりすると、楽しいんです。

そんな楽しみの一つとして、今回は「アッテネーター」の自作を始めました。


fig.
▲大きな画像へリンク

アッテネーター(電気信号の強さを弱くするアダプタ)を作るべく、アルミケースの加工を始めました。

アルミケースは以前の会社で何度か加工したことがあるので、その経験が生かせています。


アッテネーターの製作キット(材料を集めたセットで自分で組み立てるもの)は 7,000 円くらいして高価だなと思って、安く済ませようと思い自分で作ることにしたんですが、材料を集めると結局高くつきました。1万円ほどです。

電気信号を通す器材を自作するとき、高周波(100MHz~2GHz等)の信号の場合は「製作に神経を使う」とよく言われていると思います。適当な部品を使うと高周波になるほど誤差が大きいらしいんです。

私が使う目的である「APB-3」(スペクトラムアナライザ)は40MHzが上限で、比べると低周波なので、そんなに神経を使わなくても良いのかな…、と思ったんです。

それで「BNCコネクタ」や「スイッチ」など、千石(せんごく)で高価な部品は秋月(あきづき)で購入することにしました。

また、銅板を切断する「クラフトばさみ」や、同軸ケーブルの「ケーブルストリッパー(被覆むき)」なども最初リストに含めていましたが、「なんとかなる」と考え直し削除しました。安くするために。


fig.
▲アッテネータの製作について1ページ半程度で簡単に説明されている。

アッテネーターの製作方法が載っているのはこの本です。


スペクトラム・アナライザ入門―高周波信号解析に役立つ基本操作と応用 (MC BASIC) 単行本 – 2006/8/1
高橋 朋仁 (著)



fig.
▲著作権があるので拡大はできません。

その本の、アッテネーター製作方法を掲載しているページです。

このページで示されている抵抗(抵抗値が一致するもの)は秋月(ネットショップ)ではそろえられず、並列抵抗にして工夫して抵抗値をそろえても、1種類の抵抗が100本セット(100円)でしか購入できないので高価になりました。

千石電商(ネットショップ)で探したところ、必要な抵抗はすべてそろいました。ただし、10本セット(210円)です。

最初千石電商のネットショップで「単価21円」の文字が見えたので「これだっ」と思ってすべての抵抗を探してリストを作りましたが後から「数量10個~」が目に入り、1本では買えないことが判明。リストをせっかく作ったし、本に記載の通りの抵抗値でもあるしで、千石で購入することにしました。



CDMAという電波の技術(携帯電話で使われている技術)を自分でも基板で作りたいと思っています。出来上がるのは何年先かわからないし、失敗に終わるかもしれません。でも取り組むことに意味があります。取り組むこと自体が電気の勉強になるし、自己啓発にもなるし、最初に述べたように、試行錯誤の実験が面白いんだと思います。APB-3(スペクトラムアナライザ)の製作者の方も、人に聞く前に自分であれこれやってみることが大切なんだとおっしゃっています。

下図のように「EX-OR」とか「DBM(乗算)」、「ミキサ」など1つ1つをステップバイステップでやっていけばいいと思います。

とはいえ、経験不足は確実にあるのでそう簡単にいくはずはないとも思います。

ただ、会社の先輩が下図の送受信機を、床に座ってあぐらをかいて酒を飲みながら普通に作っていたので、それを見ていたら自分にもできそうだと思ってしまいました。

ちなみに下図のような様式の図面を見ながらお客さんに納品する無線機を製作したことはあるので(まともではなかったと思うけど)、そんなにほど遠いわけでもないと思います。



2018/4/21(土)

2つのプログラムリストの比較 -[program]

「プログラムリストの変更点を赤く塗る機能」を作ろう(なくなったので復元しよう)と思いました。

「2つの文書のちがいを検出するアルゴリズム」というのはだいぶ難しいもので、そのプログラミングにトライするなら体力的にとても疲れる…というのはよくわかっています。でも今回は運よく「いいこと」に気がつきました。


――― Linux の diff コマンドは同じことをやってくれる――― !!


正確には Linux ではなく UNIX です。diffコマンドは1970年代にUNIX上で開発されたのが最初だそうです。

OSが用意しているコマンドをベースに作れば、アルゴリズムを自分で考える必要はなくなります。

たいへんらくちんだ…

それでやってみたんですが…

下図の左端が「変更前リスト」、中央と右端が「変更後リスト」です。

中央は「秀丸エディタ」というテキストエディタの差分表示機能で、右端が今回試してみた UNIXの diff コマンド(の結果のテキストをビジュアル化したもの)です。

変更前と比べて変更された部分が赤く塗られています。

左端の「変更前」も一部赤く塗られていますが、これは変更後で削除された部分を表しています(秀丸エディタの機能)。

そして、秀丸エディタの結果が「文字単位」であるのに対し、UNIX の diff の結果は「行単位」になっています。


リストの下のほうも見てみます。

//描画 というコメントの行(下図赤丸部)が図の中央の「秀丸」の結果ではマーキングされていないのに、右端の diff の結果ではマーキングされてしまっています。これは後で diff -b というコマンドラインスイッチ( "スペースの数が違うだけの場合は無視" )を加えたら修正されました。


さすが 名にし負う UNIX、の diff コマンドですね。結構正確!

実際の結果はこれです。→


実はホームページ領域でも OS のコマンドが使えます。上記の diff コマンドは perl スクリプトの中で以下のような命令文で実行しています。

$diffres = join( "\n", readpipe( "diff -b \"$file1\" \"$file2\"" ) );

perl の readpipe という命令文で OS に対するコマンドの実行結果を読み取ります。

読み取り結果は行単位の配列なので、join を使って改行でつなげます。


他のサイトでもたくさん説明されていますが、UNIX の diff コマンドの結果は、

diff 元ファイル.txt 新ファイル.txt を実行すると、

10c12
<てすと
----
>テスト

このようなテキストで出力されます。例は、

元ファイルの10行目は変更(c)されて、新ファイルの12行目に対応しています。
元ファイルの てすと は削除され、新ファイルでは代わりに テスト が追加されています。(つまり変更された)

という意味になっています。結果の行頭の<は「削除」を意味していて、>は「追加」を意味しているそうです。Wikipediaより

20年以上も perl だけをやってきた私が、今phpの同様の関数である exec の説明のページを読んで「さっぱりわからん」と思ったように、perl を少しも知らない方が私の perl の説明を読んでも、ちっともわかんないんでしょうね…。


2018/4/15(日)

今現在このホームページは、今一つまとまり(ユーザーインターフェースのまとまり)がなくなっていますが、まぁ…それはのちのち直していこうと思います。

fig.
▲リスト表示へリンク

このホームページ上で、プログラムリストを表示する際に、JavaScriptの関数を色分けする機能を作りました。

(作り直し…というか一度なくなったので復元です)

function文を色分けするだけではなく、それがオブジェクト指向のクラスなのか、メソッドなのか、ただの関数なのか、という違いを自動的に認識してくれます。

関数名と同じ .png ファイルを用意しておけば関数の機能を説明するような画像を色分けした右上カドに表示してくれます。


いろいろいじっていたら、いつのまにか先日作った128文字で印を表示する機能が止まっている…。とにかくまとまりがありません。






2018/4/11(水)

スペクトラム・アナライザの「APB-3」 -[den]

fig.
▲ページを開きます

先日購入したスペクトラム・アナライザの「APB-3」は、自分で組み立てるキットなので、今日組み立てました。




 

2018/4/8(日)

ホームページや本でもそうですが、興味のない話題のときに画面いっぱいに文字が並んでいると、読む気がなくなりませんか?

そういうホームページを作ってしまうのを防止するために、文字数が多すぎる場合に目印を表示する機能を作りました。

このホームページで文字数が連続128文字を超えると、その文字の上に小さな赤い●が表示されます。

その後はリセットされない限り、128文字ごとに赤い●を繰り返し表示し続けます。文字が多いところこそ赤い丸が目立つようになります。

リセットするには画像を入れます。画像が入るとそこで文字のカウントは0にリセットされます。適度に画像が入っていれば読みやすいページということです。

また、H1~H6タグが入ってもカウントがリセットされます。話題が変わるからです。


2018/4/3(火)

スペクトラム・アナライザの「APB-3」 -[den]

とうとうスペクトラム・アナライザを購入しました…というとちょっと違う気がするので、正確に言うと、「トラ技USB-FPGA信号処理実験キット APB-3TGKIT(ケース付き)」(¥43,200)を購入しました。通称「APB-3」です。スペクトラム・アナライザの機能がついています。

本当はRIGOL DSA815-TG(アマゾンへリンク)という普通の形をしたスペクトラム・アナライザのほうが良かったんですが高価なので無理でした。

性能はAPB-3のほうが上らしいのですが…。

しばらく電子回路の趣味は休んでいましたが、これでまた火が付きそうです。